<template>
  <div class="HomeIndex-container">
    <!--  顶部bar -->
    <van-nav-bar :title="'早上好！'+infoName" class="nav-bar-top">
      <template #right>
        <van-icon name="chat-o" size="22" color="#70af09" badge="77"/>
      </template>
    </van-nav-bar>
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="2000" indicator-color="white">
      <van-swipe-item v-for="(item,index) in images" :key="index">{{ item }}</van-swipe-item>
    </van-swipe>
    <!--  功能选择 -->
    <van-grid :column-num="5" class="func-one">
      <van-grid-item text="功能1">
        <template #icon>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-rili"></use>
          </svg>
        </template>
      </van-grid-item>
      <van-grid-item text="功能2">
        <template #icon>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-xiangji"></use>
          </svg>
        </template>
      </van-grid-item>
      <van-grid-item text="功能3">
        <template #icon>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-hangcheng"></use>
          </svg>
        </template>
      </van-grid-item>
      <van-grid-item text="功能4">
        <template #icon>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-xizhuang"></use>
          </svg>
        </template>
      </van-grid-item>
      <van-grid-item text="功能5">
        <template #icon>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-yinle"></use>
          </svg>
        </template>
      </van-grid-item>
    </van-grid>
    <!--矩阵-->
    <van-grid class="func-main">
      <van-grid-item v-for="(value,index) in funcIcon"
                     :key="index"
                     :icon="value.icon"
                     :text="'功能'+(Number(index)+1)"
                     @click="onClickMenuItem(index)"
                     :style="{background:value.color}"
      />
    </van-grid>
    <!-- 底部 -->
    <van-tabbar v-model="active" active-color="#88bf01" class="van-tabbar-bottom">
      <van-tabbar-item icon="newspaper-o">工作</van-tabbar-item>
      <van-tabbar-item icon="flower-o">助手</van-tabbar-item>
      <van-tabbar-item class="bottom-center">
        <span>常用</span>
        <template #icon>
          <img :src="icon.inactive"/>
        </template>
      </van-tabbar-item>
      <van-tabbar-item icon="sign">分析</van-tabbar-item>
      <van-tabbar-item icon="contact">我</van-tabbar-item>
    </van-tabbar>
    <!-- overlay弹框 -->
    <OverLay :isShow.sync="isShow" :grid-index="gridIndex"></OverLay>
    <div class="bottom_bg"></div>
  </div>
</template>

<script>
import OverLay from './components/overlay.vue'

export default {
  name: 'HomeIndex',
  components: {
    OverLay
  },
  data () {
    return {
      infoName: '张三先生',
      images: [1, 2, 3, 4],
      // symbolIcon: ['icon-rili', 'icon-xiangji', 'icon-hangcheng', 'icon-xizhuang', 'icon-yinle']
      funcIcon: [
        {
          icon: 'like-o',
          color: 'skyblue'
        },
        {
          icon: 'location-o',
          color: 'red'
        },
        {
          icon: 'star-o',
          color: 'green'
        },
        {
          icon: 'bag-o',
          color: 'pink'
        },
        {
          icon: 'todo-list-o',
          color: 'orange'
        },
        {
          icon: 'shop-collect-o',
          color: 'lightpink'
        },
        {
          icon: 'smile-comment-o',
          color: 'purple'
        },
        {
          icon: 'bag-o',
          color: 'yellow'
        },
        {
          icon: 'like-o',
          color: 'lightpurple'
        },
        {
          icon: 'location-o',
          color: 'lightyellow'
        }
      ],
      // funcIcon: ['like-o', 'location-o', 'star-o', 'bag-o', 'todo-list-o', 'shop-collect-o', 'smile-comment-o', 'star-o', 'bag-o', 'location-o'],
      active: 0,
      icon: {
        inactive: require('@/assets/add.svg')
      },
      isShow: false,
      gridIndex: 0
    }
  },
  methods: {
    onClickMenuItem (index) {
      this.gridIndex = index
      this.isShow = true
    }
  }

}
</script>
<style lang="less" scoped>
.HomeIndex-container {
  //background-color: #f1f1f1;

  .nav-bar-top {
    height: 50px;
    background-color: #272a3b;

    ::v-deep(.van-nav-bar__title) {
      color: #70af09;
    }
  }

  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }

  .func-one {
    ::v-deep(.van-grid-item__content) {
      background-color: #272a3b;
    }

    ::v-deep(.van-grid-item__text) {
      border: none;
      //background-color: #272a3b;
      color: white;
      padding-top: 2px;
    }

    ::v-deep(.van-grid-item__content::after) {
      border: none;
    }
  }

  .func-main {

    ::v-deep(.van-grid-item__content) {
      padding-top: 16px;
      padding-bottom: 16px;

      .van-icon {
        font-size: 38px;
        padding: 3px;
        border-radius: 40%;
        color: white;
        background-color: #ffa32c;
      }
    }
  }

  .van-tabbar-bottom {
    background-color: #fafafa;
    height: 55px;

    .bottom-center {
      background-color: #fafafa;
      z-index: 1;

      img {
        width: 2.15em;
        height: 2.15em;
        margin-top: -32px;
        border: 4px solid #fafafa;
        border-radius: 70%;

      }
    }
  }

  .bottom_bg {
    height: 0.9rem;
    width: 100%;
    background-color: #f1f1f1;
    border: none;
  }
}
</style>
